<template>
  <div>
      <div v-if="pageIndex === 1" class="title">
          我的佣金
      </div>

      <div v-if="pageIndex === 1" class="conentStype">


          <div class="embody">

              <div>

                  <div style="display: flex;">
                      <div class="imgesStype">
                          <img src="../../../../static/engineering5188/prefecture/moneyIcon.png" />
                      </div>

                      <div class="numright">
                          <p class="tixianText">可提现佣金</p>
                          <p class="tixianNum">{{ dataObj.yue }}</p>
                      </div>
                  </div>

                  <div class="tixianTextTwo">
                      已提现佣金：<span class="spanNum">{{ dataObj.lingqu_yongjin }}</span>
                  </div>

              </div>


              <div>
                  <el-button class="buttonClose" @click="cancel(2)">提现</el-button>
              </div>

          </div>


          <div @click="cancel(4)" class="Records" style="cursor: pointer;">

              <div>
                  <p class="lookJl">提现记录</p>
                  <p class="lookDta">立即查看</p>
              </div>

              <div class="imgesStype">
                  <img src="../../../../static/engineering5188/prefecture/withdraw.png" />
              </div>

          </div>


          <div @click="cancel(3)" class="collection" style="cursor: pointer;">


              <div>
                  <p class="lookJl">收款账户</p>
                  <p class="lookDta" style="color: #2294AC;">立即维护</p>
              </div>

              <div class="imgesStype">
                  <img src="../../../../static/engineering5188/prefecture/account.png" />
              </div>

          </div>



          <div @click="$router.push('/supplierIndex/Supplierteam')" class="team" style="cursor: pointer;">


              <div>
                  <p class="lookJl">我的团队</p>
                  <p class="lookDta" style="color: #DD8052;">立即查看</p>
              </div>

              <div class="imgesStype">
                  <img src="../../../../static/engineering5188/prefecture/teamIcon.png" />
              </div>

          </div>



      </div>

      <div class="rocketDiv"  v-if="pageIndex === 1">
          <div class="custom-progress">
              <div class="progress-bar" :style="{ width: progressWidth }"></div>
              <div class="progress-indicator" v-if="showIndicator" :style="{ left: progressWidth }">
                  <img class="rocketImgS" src="../../../../static/engineering5188/prefecture/rocketImg.png"
                      alt="indicator" />
                  <!-- 替换为实际图标路径 -->
              </div>
              <div v-if="totalShow === true" :style="{ left: progressWidth }" class="progress-text">
                  <span class="current-text">{{ currentText }}</span>
              </div>
          </div>
      </div>

      <div class="rocketText"  v-if="pageIndex === 1">
          <p class="textOne">邀请缴费累计{{ totalText }}W</p>
          <p class="textTwo">返还会员费6W</p>
      </div>



      <div v-if="pageIndex === 1" class="jinQi">

          近期收益
      </div>



      <ul v-if="pageIndex === 1">
          <li :class="indexNum === 1 ? 'liStypeHover' : 'liStype'" @click="OpenTody">今日</li>
          <li :class="indexNum === 2 ? 'liStypeHover' : 'liStype'" @click="OpenYes">昨日</li>
          <li :class="indexNum === 3 ? 'liStypeHover' : 'liStype'" @click="OpenWeek">近7日</li>
          <li :class="indexNum === 4 ? 'liStypeHover' : 'liStype'" @click="OpenMount">近1个月</li>
          <li :class="indexNum === 5 ? 'liStypeHover' : 'liStype'" @click="OpenthirdMount">近3个月</li>
      </ul>


      <div v-if="pageIndex === 1" class="shouyiData">


          <div class="dataDiv">

              <div class="numberData">{{ numObj.num }}</div>
              <div class="numberText">推荐数量</div>

          </div>



          <div class="dataDivTwo">

              <div class="numberData">{{ numObj.money }}</div>
              <div class="numberText">分销金额</div>

          </div>


      </div>







      <!-- 申请提现 -->

      <ApplicationForWithdrawal v-if="pageIndex === 2" @returnClick="returnClick"></ApplicationForWithdrawal>



      <!-- 收款账户 -->
      <maintenance v-if="pageIndex === 3"  @returnClick="returnClick"></maintenance>

      <!-- 提现记录 -->


      <WithdrawalRecord v-if="pageIndex === 4"  @returnClick="returnClick"></WithdrawalRecord>

  </div>
</template>

<script>
import WithdrawalRecord from '../newSupplier/compayPage/WithdrawalRecord.vue';
import maintenance from '../newSupplier/compayPage/maintenance.vue';
import ApplicationForWithdrawal from '../newSupplier/compayPage/ApplicationForWithdrawal.vue';
import { mapState } from 'vuex';

export default {
  components: {
      ApplicationForWithdrawal,
      maintenance,
      WithdrawalRecord
  },
  computed: {
      ...mapState([
          "userInfo",
      ]),
  },
  data() {
      return {
          indexNum: 1,
          pageIndex: 1,
          dataObj: {},
          numObj: {
              num: 0,
              money: 0
          },
          totalAll: 200000, // 目标值
          current: 0, // 当前值
          showIndicator: true,
          totalShow: true,
          setObj: {},
          fxSong: 50000,
      }
  },
  computed: {
      ...mapState([
          "userInfo",
      ]),
      progressWidth() {
          let a = (this.current / this.totalAll) * 100;
          console.log(a);

          if (a < 100) {
              this.totalShow = true;
              return (this.current / this.totalAll) * 100 + "%";
          } else {
              this.totalShow = false;
              return 100 + "%";
          }
      },
      currentText() {
          return `邀请缴费累计${this.current / 10000}万`;
      },
      totalText() {
          return `${+(this.totalAll) / 10000}`;
      },
      fixtext() {
          return `${+(this.fxSong) / 10000}`;
      }
  },
  created() {
      this.getData();
      this.getSetting();
      this.getProductList();
  },
  methods: {
    returnClick(){
      this.pageIndex = 1;
    },
      getSetting() {
          this.$httpApi("/api/setting", {}, 'get').then(res => {
              this.totalAll = +(res.data.fxMan);
              this.fxSong = +(res.data.fxSong);
          })
      },
      getProductList() {
          this.$httpApi("/api/myTeam", {
              token: this.userInfo.token,
              page: 1,
              pageSize: 1000,
          }, 'get').then(res => {
              debugger
              this.totalPage = Math.ceil(res.data.count / this.pageSize);
              this.total = res.data.count;
              this.current = res.data.money;
          })
      },
      getData() {
          this.$httpApi("/api/userData", {
              token: this.userInfo.token
          }, 'get').then(res => {
              this.dataObj = res.data;
              this.OpenTody();
          })
      },
      OpenTody() {
          this.indexNum = 1;
          this.numObj = this.dataObj.today
      },
      OpenYes() {
          this.indexNum = 2;
          this.numObj = this.dataObj.yestoday
      },
      OpenWeek() {
          this.indexNum = 3;
          this.numObj = this.dataObj.week
      },
      OpenMount() {
          this.indexNum = 4;
          this.numObj = this.dataObj.month
      },
      OpenthirdMount() {
          this.indexNum = 5;
          this.numObj = this.dataObj['3month']
      },
      cancel(num) {
          this.pageIndex = num
      }
  }

}
</script>

<style lang="less" scoped>
.dataDiv {
  margin-left: 78px;
}

.dataDivTwo {
  margin-left: 169px;
}

.numberText {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #606060;

  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.numberData {
  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 28px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}

.shouyiData {
  width: 1157px;
  height: 126px;
  background: #F8F9FD;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #DCDFE9;
  margin: 17px auto;
  display: flex;
  align-items: center;
  text-align: center;
}

ul {
  display: flex;
  margin-left: 30px;
  margin-top: 24px;
}

.liStype {
  padding: 6px 14px;
  background: #EFF4FD;
  border-radius: 20px 20px 20px 20px;
  margin-right: 16px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #5D5D5D;

  font-style: normal;
  text-transform: none;
}


.liStypeHover {
  padding: 6px 14px;
  background: #F8F9FD;
  border-radius: 20px 20px 20px 20px;
  border: 1px solid #0052D9;
  margin-right: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052D9;

  font-style: normal;
  text-transform: none;
}


.jinQi {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  padding: 0 30px;
  font-style: normal;
  text-transform: none;
}

.lookJl {

  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}

.lookDta {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #2445CB;
  font-style: normal;
  text-transform: none;
  margin-top: 20px;
}


.numright {
  margin-left: 20px;
  margin-top: 5px;
}

.spanNum {

  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #333333;

  font-style: normal;
  text-transform: none;

}

.tixianNum {

  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 28px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}

.tixianTextTwo {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #606060;
  margin-top: 11px;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.tixianText {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #606060;

  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.imgesStype img {
  width: 60px;
  height: 60px;
}

.buttonClose {
  width: 100px;
  background: #FF7A01;
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  font-style: normal;
  text-transform: none;

}

.team {
  width: 246px;
  height: 136px;
  background: #FFF9F6;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EFE2DC;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px;
}

.collection {
  width: 246px;
  height: 136px;
  background: #EEF7F9;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #D1E1E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px;
}

.Records {
  width: 246px;
  height: 136px;
  background: #F8F9FD;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #DCDFE9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px;

}

.embody {
  width: 379px;
  height: 136px;
  background: #FEF7EA;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEE0C8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 20px;
}

.conentStype {
  display: flex;
  padding: 36px 28px;
  justify-content: space-between;
}

.title {
  height: 56px;
  background: #FFFFFF;
  line-height: 56px;
  border-radius: 0px 0px 0px 0px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  border-bottom: 4px solid #F5F5F5;
  padding-left: 32px;
}


.rocketDiv {
  width: 600px;
  margin: auto;
  margin-top: 30px;
  height: 15px;
  background: #ededed;
  border-radius: 6px 6px 6px 6px;
}

.custom-progress {
  position: relative;
  height: 10px;
  margin: 20px 0;
}

.progress-bar {
  height: 15px;
  background-color: orange;
  transition: width 0.3s ease;
  border-radius: 6px 6px 6px 6px;
}

.progress-indicator {
  position: absolute;
  top: -15px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
}

.current-text {
  margin-left: -36px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.progress-text {
  position: relative;
  margin-top: 10px;
  font-size: 14px;
}

.title {
  height: 56px;
  background: #ffffff;
  line-height: 56px;
  border-radius: 0px 0px 0px 0px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  border-bottom: 4px solid #f5f5f5;
  padding-left: 32px;
}

.textTwo {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

.textOne {
  padding-right: 5px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}

.rocketText {
  width: 700px;
  margin: auto;
  text-align: right;
  margin-top: 14px;
}
</style>